<template>
  <d2-container class="page">

  	<!-- 销售看板 -->
  	<template v-if="!!statSales && statSales.isSale">
	    <el-row :gutter="24">
	      <!-- 交易笔数 -->
	      <el-col :span="12">
	        <el-card shadow="hover" class="my-card">
	          <div slot="header" class="clearfix no-select" style="text-align: center">
	            当日成功交易笔数
	          </div>
	          <el-row type="flex" align="middle" justify="center" style="height: 40px" v-loading="false">
				<div style="font-size: 35px;">{{statSales.daySuccessCount}}</div>          
	          </el-row>
	        </el-card>
	      </el-col>

	      <el-col :span="12">
	        <el-card shadow="hover" class="my-card">
	          <div slot="header" class="clearfix no-select" style="text-align: center">
	            当月成功交易笔数
	          </div>
	          <el-row type="flex" align="middle" justify="center" style="height: 40px" v-loading="false">
				<div style="font-size: 35px;">{{statSales.monthSuccessCount}}</div>          
	          </el-row>
	        </el-card>
	      </el-col>

	      <el-col :span="24" style="margin-top: 20px;">
	        <el-card shadow="hover" class="my-card">
	          <div slot="header" class="clearfix no-select" style="text-align: center;">
	          	<el-row :gutter="20">
	          		<el-col :span="8">当日商户结算金额</el-col>
	          		<el-col :span="8">当月商户结算金额</el-col>
	          		<el-col :span="8">剩余可提现金额</el-col>
	          	</el-row>
	          </div>
	          <template v-for="(item, index) in statSales.amountList">
		          <el-row :gutter="20" :key="index" type="flex" align="middle" justify="center" style="height: 40px; text-align: center; font-size: 28px;" v-loading="false">
		          	<el-col :span="8">
		          		<span class="no-select sales-amount-currency">{{item.currency}}</span>
		          		<span>{{(item.day / 100).toFixed(2)}}</span>
		          	</el-col>
		          	<el-col :span="8">
		          		<span class="no-select sales-amount-currency">{{item.currency}}</span>
		          		<span>{{(item.month / 100).toFixed(2)}}</span>
		          	</el-col>
		          	<el-col :span="8">
		          		<span class="no-select sales-amount-currency">{{item.currency}}</span>
		          		<span>{{(item.balance / 100).toFixed(2)}}</span>
		          	</el-col>
		          </el-row>
	          </template>
	        </el-card>
	      </el-col>
	  </el-row>

  	</template>
  	<template v-else>
	  	<h1>首页</h1>
  	</template>

  </d2-container>
</template>

<script>

import ApiDashboard from '@/api/dashboard.js';

export default {

	data () {
		return {
			// statSales: {
		 //        "isSale": true,
		 //        "daySuccessCount": 888888,
		 //        "monthSuccessCount": 888888,
		 //        "amountList": [
		 //            {
		 //            	"currency": "CNY",
		 //                "day": 987654321033,
		 //                "month": 987654321033,
		 //                "balance": 987654321033
		 //            },
		 //            {
		 //            	"currency": "USD",
		 //                "day": 987654321033,
		 //                "month": 987654321033,
		 //                "balance": 987654321033
		 //            },
		 //            {
		 //            	"currency": "JPY",
		 //                "day": 987654321033,
		 //                "month": 987654321033,
		 //                "balance": 987654321033
		 //            }
		 //        ]
		 //    }

			 statSales: null,
		};
	},

	async mounted () {
		await this.fetchAll();
	},

	methods: {
		async fetchAll () {
			await this.fetchStatSales();
		},

		async fetchStatSales () {

			var re = null;

			try {
				re = await ApiDashboard.statSales();
			} catch (err) {
				console.error(err);
			}

			this.statSales = Object.copy(re);
		},
	},

}

</script>

<style>
	.sales-amount-currency {
		font-size: 20px; display: inline-block; width: 60px;
	}
</style>
